<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-home"></i>定价管理</el-breadcrumb-item>
                <el-breadcrumb-item>产品定价</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="query.auditState" @change="handleSearch" clearable placeholder="审核状态" class="handle-select mr10">
                    <el-option key="1" label="已上线" :value="1"></el-option>
                    <el-option key="2" label="待审核" :value="2"></el-option>
                    <el-option key="3" label="已关闭" :value="3"></el-option>
                    <el-option key="4" label="已下线" :value="4"></el-option>
                </el-select>
                <el-button type="default" @click="handleAddSetPrice">添加定价</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="产品ID" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="名称" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column label="价格" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.price }}</template>
                </el-table-column>

                <el-table-column label="开始时间" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.validityStart }}</template>
                </el-table-column>
                <el-table-column label="结束时间" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.validityEnd }}</template>
                </el-table-column>

                <el-table-column label="状态" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{
                        scope.row.auditState == 1
                            ? '已上线'
                            : scope.row.auditState == 2
                            ? '待审核'
                            : scope.row.auditState == 3
                            ? '已关闭'
                            : scope.row.auditState == 4
                            ? '已下线'
                            : ''
                    }}</template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                        <el-button type="text" class="red" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex + 1"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 添加定价 -->
        <el-dialog title="添加定价" :visible.sync="setPriceVisible" width="50%">
            <el-form ref="form" :model="form" label-width="auto">
                <el-form-item label="产品名称:">
                    <el-input class="handle-select" placeholder="请输入产品名称" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="资源类型:">
                    <el-select v-model="form.type" placeholder="" :clearable="true" class="handle-select">
                        <el-option key="10" label="vip" :value="10"></el-option>
                        <el-option key="20" label="普通产品" :value="20"></el-option>
                        <el-option key="21" label="歌曲类型" :value="21"></el-option>
                        <el-option key="22" label="专辑类型" :value="22"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="促销渠道:">
                    <el-select v-model="form.name" placeholder="" :clearable="true" class="handle-select">
                        <el-option key="0" label="OPPO国内" :value="0"></el-option>
                        <el-option key="1" label="VIVO国内" :value="1"></el-option>
                        <el-option key="2" label="小米国内" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="付费下载数量:">
                    <el-input v-model="form.downloadLimit"></el-input>
                </el-form-item>

                <el-form-item label="产品价格:">
                    <el-input v-model="form.price" placeholder="请输入会员价格"></el-input>
                </el-form-item>

                <el-form-item label="生效时间：">
                    <el-date-picker style="width:100%" v-model="form.validityStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间：">
                    <el-date-picker style="width:100%" v-model="form.validityEnd" type="datetime" placeholder="选择日期"> </el-date-picker>
                </el-form-item>

                <el-form-item label="产品下架时间：">
                    <el-date-picker style="width:100%" v-model="form.onlineTime" type="datetime" placeholder="选择日期"> </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                    <el-radio v-model="form.state" label="1">开启</el-radio>
                    <el-radio v-model="form.state" label="2">关闭</el-radio>
                </el-form-item>

                <el-form-item label="产品模版:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="模版ID信息"
                        v-model="form.templeteBody"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>

                <el-form-item label="备注信息:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="输入变更信息"
                        v-model="form.mark"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveSetPrice">提交审核</el-button>
                <el-button @click="setPriceVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="editVisible" width="50%">
            <el-form ref="editform" :model="editform" label-width="auto">
                <el-form-item label="产品名称:">
                    <el-input class="handle-select" placeholder="请输入产品名称" v-model="editform.name"></el-input>
                </el-form-item>
                <el-form-item label="资源类型:">
                    <el-select v-model="editform.type" placeholder="" :clearable="true" class="handle-select">
                        <el-option key="10" label="vip" :value="10"></el-option>
                        <el-option key="20" label="普通产品" :value="20"></el-option>
                        <el-option key="21" label="歌曲类型" :value="21"></el-option>
                        <el-option key="22" label="专辑类型" :value="22"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="促销渠道:">
                    <el-select v-model="editform.name" placeholder="" :clearable="true" class="handle-select">
                        <el-option key="0" label="OPPO国内" :value="0"></el-option>
                        <el-option key="1" label="VIVO国内" :value="1"></el-option>
                        <el-option key="2" label="小米国内" :value="2"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="付费下载数量:">
                    <el-input v-model="editform.downloadLimit"></el-input>
                </el-form-item>

                <el-form-item label="产品价格:">
                    <el-input v-model="editform.price" placeholder="请输入会员价格"></el-input>
                </el-form-item>

                <el-form-item label="生效时间：">
                    <el-date-picker style="width:100%" v-model="editform.validityStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间：">
                    <el-date-picker style="width:100%" v-model="editform.validityEnd" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="产品下架时间：">
                    <el-date-picker style="width:100%" v-model="editform.onlineTime" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                    <el-radio v-model="editform.state" label="1">开启</el-radio>
                    <el-radio v-model="editform.state" label="2">关闭</el-radio>
                </el-form-item>

                <el-form-item label="产品模版:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="模版ID信息"
                        v-model="editform.templeteBody"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>

                <el-form-item label="备注信息:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="输入变更信息"
                        v-model="editform.mark"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveEdit">提交审核</el-button>
                <el-button @click="editVisible = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 审核 -->
        <el-dialog title="审核" :visible.sync="auditVisible" width="50%">
            <el-form ref="auiditform" :model="auiditform" label-width="auto">
                <el-form-item label="审核意见:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="输入变更信息"
                        v-model="auiditform.desc"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="审核状态:">
                    <el-select v-model="auiditform.auditState" placeholder="" :clearable="true" class="handle-select">
                        <el-option key="1" label="待审核" :value="1"></el-option>
                        <el-option key="2" label="审核通过" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveAudit">保存审核</el-button>
                <el-button @click="auditVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import { fetchData } from '@/api/index';
import NProgress from 'nprogress';
export default {
    name: 'ProductSetPrice',
    data() {
        return {
            query: {
                auditState: '',

                name: '',
                pageIndex: 0,
                pageSize: 10
            },
            tableData: [
                {
                    id: 1,
                    name: '张三',
                    money: 123,
                    address: '广东省东莞市长安镇',
                    state: '成功',
                    date: '2019-11-1',
                    thumb: 'https://lin-xin.gitee.io/images/post/wms.png'
                }
            ],
            multipleSelection: [],
            delList: [],
            setPriceVisible: false,
            editVisible: false,
            auditVisible: false,
            pageTotal: 0,
            form: {
                name: '',
                type: '',
                downloadLimit: '',
                price: '',
                validityStart: '',
                validityEnd: '',
                onlineTime: '',
                state: '',
                templeteBody: '',
                mark: ''
            },
            editform: {
                id: '',
                name: '',
                type: '',
                downloadLimit: '',
                price: '',
                validityStart: '',
                validityEnd: '',
                onlineTime: '',
                state: '',
                templeteBody: '',
                mark: '',
                resIds: '',
                currency: '',
                auditionLimit: ''
            },

            auiditform: {
                id: '',
                desc: '',
                auditState: ''
            },
            idx: -1,
            id: -1
        };
    },
    activated() {
        this.getData();
    },
    methods: {
        handleAddSetPrice() {
            this.setPriceVisible = true;
        },
        async saveAudit() {
            try {
                const url = '/product/audit';
                const { data: res } = await this.$http[0].post(
                    url,
                    this.$objTostring(
                        this.$removeField({
                            id: this.auiditform.id,
                            desc: this.auiditform.desc,
                            auditState: this.auiditform.auditState
                        })
                    ),
                    // {
                    //     id: this.auiditform.id,
                    //     desc: this.auiditform.desc,
                    //     auditState: this.auiditform.auditState
                    // },
                    {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                );
                console.log(res);
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.getData();
                this.auditVisible = false;
            } catch (err) {
                console.dir(err);
                this.auditVisible = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        async getData() {
            try {
                NProgress.start();
                const url = '/product/query';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        auditState: this.query.auditState,
                        page: this.query.pageIndex,
                        size: this.query.pageSize
                    }
                });
                console.log(res);
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.validityStart = this.$dateFormat(item.validityStart, '', '-');
                        item.validityEnd = this.$dateFormat(item.validityEnd, '', '-');
                    });
                    this.tableData = res.data.content;
                    this.pageTotal = res.data.totalElements || 0;
                } else {
                    this.tableData = [];
                    this.pageTotal = 0;
                }
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
            // fetchData(this.query).then(res => {
            //     console.log(res);
            //     this.tableData = res.list;
            //     this.pageTotal = res.pageTotal || 50;
            // });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        },
        handleAudit(index, row) {
            this.auditVisible = true;
            console.log(index, row);
            this.auiditform = {
                id: row.id,
                desc: row.desc,
                auditState: row.auditState
            };
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            console.log(index, row);
            this.idx = index;
            this.editform = {
                id: row.id,
                // name: row.name,
                name: row.name,
                type: row.type,
                downloadLimit: row.downloadLimit,
                price: row.price,
                validityStart: this.$timstampToStandardDate(new Date(row.validityStart).getTime()),
                validityEnd: this.$timstampToStandardDate(new Date(row.validityEnd).getTime()),
                onlineTime: this.$timstampToStandardDate(row.onlineTime),
                state: row.state,
                templeteBody: row.templeteBody,
                mark: row.mark,

                resIds: row.resIds,
                currency: row.currency,
                auditionLimit: row.auditionLimit
            };
            this.editVisible = true;
            // this.getEditData();
        },
        // async getEditData(){
        //     try{

        //     }catch(err){
        //         console.dir(err);
        //     }
        // }
        async saveEdit() {
            try {
                const url = '/product/update';
                const { data: res } = await this.$http[0].post(
                    url,
                    this.$objTostring(
                        this.$removeField({
                            id: this.editform.id,
                            name: this.editform.name,
                            auditionLimit: this.editform.auditionLimit,
                            downloadLimit: this.editform.downloadLimit,
                            price: this.editform.price,
                            type: this.editform.type,
                            currency: this.form.currency,
                            validityStart: this.$standardDateToTimstamp(this.editform.validityStart),
                            validityEnd: this.$standardDateToTimstamp(this.editform.validityEnd),
                            onlineTime: this.$standardDateToTimstamp(this.editform.onlineTime),
                            state: this.editform.state,
                            templeteBody: this.editform.templeteBody,
                            mark: this.editform.mark,
                            resIds: this.editform.resIds
                        })
                    ),
                    // {
                    //     id: this.editform.id,
                    //     name: this.editform.name,
                    //     auditionLimit: this.editform.auditionLimit,
                    //     downloadLimit: this.editform.downloadLimit,
                    //     price: this.editform.price,
                    //     type: this.editform.type,
                    //     currency: this.form.currency,
                    //     validityStart: this.$standardDateToTimstamp(this.editform.validityStart),
                    //     validityEnd: this.$standardDateToTimstamp(this.editform.validityEnd),
                    //     onlineTime: this.$standardDateToTimstamp(this.editform.onlineTime),
                    //     state: this.editform.state,
                    //     templeteBody: this.editform.templeteBody,
                    //     mark: this.editform.mark,
                    //     resIds: this.editform.resIds
                    // },
                    {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                );
                console.log(res);
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.getData();
                this.editVisible = false;
            } catch (err) {
                console.dir(err);
                this.editVisible = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // 保存添加定价
        async saveSetPrice() {
            try {
                const url = '/product/create';
                const { data: res } = await this.$http[0].post(
                    url,
                    this.$objTostring(
                        this.$removeField({
                            downloadLimit: this.form.downloadLimit,
                            onlineTime: this.form.onlineTime,
                            name: this.form.name,
                            templeteBody: this.form.templeteBody,
                            state: this.form.state,
                            type: this.form.type,
                            price: this.form.price,
                            mark: this.form.mark,
                            validityStart: this.$standardDateToTimstamp(this.form.validityStart),
                            validityEnd: this.$standardDateToTimstamp(this.form.validityEnd)
                        })
                    ),
                    // {
                    //     downloadLimit: this.form.downloadLimit,
                    //     onlineTime: this.form.onlineTime,
                    //     name: this.form.name,
                    //     templeteBody: this.form.templeteBody,
                    //     state: this.form.state,
                    //     type: this.form.type,
                    //     price: this.form.price,
                    //     // resIds: this.form.resIds,
                    //     mark: this.form.mark,
                    //     validityStart: this.$standardDateToTimstamp(this.form.validityStart),
                    //     validityEnd: this.$standardDateToTimstamp(this.form.validityEnd)
                    //     // auditionLimit: this.form.auditionLimit,
                    //     // currency: this.form.currency
                    // },
                    {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                );
                console.log(res);
                this.$message.success({
                    duration: 1500,
                    message: res.message
                });
                this.form = {
                    name: '',
                    type: '',
                    downloadLimit: '',
                    price: '',
                    validityStart: '',
                    validityEnd: '',
                    onlineTime: '',
                    state: '',
                    templeteBody: '',
                    mark: ''
                };
                this.setPriceVisible = false;
                this.getData();
            } catch (err) {
                console.dir(err);
                this.setPriceVisible = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val - 1);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    text-align: right;
}

.handle-select {
    /* width: 120px; */
    width: auto;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
